<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>商场消防云平台 - 主页</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }

    .header {
      background-color: #409EFF;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header h1 {
      margin: 0;
    }

    .nav {
      background-color: #333;
      overflow: hidden;
      display: flex;
    }

    .nav a {
      color: white;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .nav a:hover {
      background-color: #ddd;
      color: black;
    }

    .nav a.active {
      background-color: #4CAF50;
      color: white;
    }

    .container {
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .module-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 调整为 3 列布局，可根据需求再改 */
      gap: 20px;
      margin-top: 20px;
    }

    .module-card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .module-card:hover {
      transform: translateY(-5px);
    }

    .module-icon {
      font-size: 40px;
      margin-right: 20px;
      width: 60px;
      text-align: center;
    }

    .module-info h3 {
      margin: 0 0 10px 0;
    }

    .logout {
      color: white;
      text-decoration: none;
    }

    .logout:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
<div class="header">
  <h1>商场消防云平台</h1>
  <div>
    <a href="LogoutServlet" class="logout">退出登录</a>
  </div>
</div>

<div class="nav">
  <a href="main.jsp" class="active">首页</a>
  <a href="fire_alarm_list.jsp">火灾报警系统</a>
  <a href="equipment_management.jsp">消防设备管理系统</a>
  <a href="inspection_system.jsp">设备巡检系统</a>
  <a href="video_monitoring.jsp">视频监控系统</a>
  <a href="emergency_plan.jsp">应急预案管理</a>
  <%
    // 获取 Session 中的用户角色，假设之前登录时已存入 "role"
    String role = (String) session.getAttribute("role");
    if ("管理人员".equals(role)) { // 仅管理人员显示以下链接
  %>
  <a href="duty_staff.jsp">检查人员管理</a>
  <a href="system.jsp">系统管理</a>
  <% } %>
  <a href="change_password.jsp">修改密码</a>
</div>

<div class="container">
  <h2>系统概览</h2>

  <div class="module-container">
    <div class="module-card" onclick="window.location.href='fire_alarm_list.jsp'">
      <div class="module-icon" style="color: #f44336;">🔥</div>
      <div class="module-info">
        <h3>火灾报警系统</h3>
        <p>实时监控烟雾浓度和温度，及时发现火灾隐患</p>
      </div>
    </div>

    <div class="module-card" onclick="window.location.href='equipment_management.jsp'">
      <div class="module-icon" style="color: #2196F3;">🚰</div>
      <div class="module-info">
        <h3>消防设备管理系统</h3>
        <p>管理消防设备位置、状态和维护记录</p>
      </div>
    </div>

    <div class="module-card" onclick="window.location.href='inspection_system.jsp'">
      <div class="module-icon" style="color: #FFC107;">🔍</div>
      <div class="module-info">
        <h3>设备巡检系统</h3>
        <p>安排设备巡检任务，记录巡检结果</p>
      </div>
    </div>

    <div class="module-card" onclick="window.location.href='video_monitoring.jsp'">
      <div class="module-icon" style="color: #FFC107;">📹</div>
      <div class="module-info">
        <h3>视频监控系统</h3>
        <p>实时查看商场各区域的监控视频</p>
      </div>
    </div>

    <div class="module-card" onclick="window.location.href='emergency_plan.jsp'">
      <div class="module-icon" style="color: #4CAF50;">📑</div>
      <div class="module-info">
        <h3>应急预案管理</h3>
        <p>管理各类火灾应急预案，快速响应</p>
      </div>
    </div>

    <%
      if ("管理人员".equals(role)) {
    %>
    <div class="module-card" onclick="window.location.href='duty_staff.jsp'">
      <div class="module-icon" style="color: #4CAF50;">👨💼</div>
      <div class="module-info">
        <h3>检查人员管理</h3>
        <p>管理检查人员排班和工作记录</p>
      </div>
    </div>
    <% } %>
  </div>
</div>

<script>
  // 页面加载后获取统计数据
  $(document).ready(function () {
    loadStatistics();
  });

  // 加载统计数据
  function loadStatistics() {
    // 这里应该通过 AJAX 获取实际数据
    // 示例数据，实际应从后端获取
    var statistics = {
      todayAlarms: 5,
      pendingAlarms: 2,
      totalHydrants: 120,
      onlineStaff: 8
    };

    // 更新统计数据，注意页面中如果没有对应元素，可根据实际情况调整或删除
    // 比如下面的代码假设页面有 id 为 todayAlarms 等的元素用于显示统计数据，若没有可注释或删除
    $("#todayAlarms").text(statistics.todayAlarms);
    $("#pendingAlarms").text(statistics.pendingAlarms);
    $("#totalHydrants").text(statistics.totalHydrants);
    $("#onlineStaff").text(statistics.onlineStaff);
  }
</script>
</body>
</html>